<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        const projectId = "0P8OMAHSU0W4";
        const authorizeClientId = "0C8OMAMM2QDC";
        const clientCreClientId = "0C8OMAMBGNWG";
        const passwordClientId = "0C8OMAMTVNY8";
        const commonSecret = "97b29ceb-c445-4178-bb95-84755f14cba6";
        // const apiUrlPrefix = "http://localhost:8111"
        // const authorizeServerUrlPrefix = "http://localhost:4300";
        const authorizeServerUrlPrefix = "https://www.letsauth.cloud";
        const apiUrlPrefix = "https://api.letsauth.cloud"
        let mfaRequired = false;
        addEventListener("load", (event) => {
            if (location.search) {
                getToken(projectId, authorizeClientId, location.search.replace('?code=', ''))
            }
        });
        function getCurrentLocation() {
            return location.origin
        }
        function callPublicApi() {
            const options = {
                method: "GET",
            }
            fetch(`${apiUrlPrefix}/demo-svc/public`, options).then((next) => {
                next.json().then(resp => {
                    document.getElementById('output').innerText = JSON.stringify(resp, undefined, 4);
                })
            })
        }
        function authorizationLogin(projectId, clientId) {
            location.replace(
                `${authorizeServerUrlPrefix}/authorize?response_type=code&client_id=${clientId}&redirect_uri=${getCurrentLocation()}&state=login&project_id=${projectId}`
            );
        }
        function clientCredentialLogin(clientId) {
            const myHeaders = new Headers();
            myHeaders.append("Authorization", 'Basic ' + btoa(clientId + ':' + commonSecret));
            const formData = new FormData();
            formData.append('grant_type', 'client_credentials');
            formData.append('scope', 'not_used');
            const options = {
                method: "POST",
                headers: myHeaders,
                body: formData
            }
            fetch(`${apiUrlPrefix}/auth-svc/oauth/token`, options).then((next) => {
                next.json().then(resp => {
                    document.getElementById('token').innerText = JSON.stringify(resp, undefined, 4);
                })
            })
        }
        function getToken(projectId, clientId, code) {
            const myHeaders = new Headers();
            myHeaders.append("Authorization", 'Basic ' + btoa(clientId + ':' + commonSecret));
            const formData = new FormData();
            formData.append('grant_type', 'authorization_code');
            formData.append('code', code);
            formData.append('scope', projectId);
            formData.append('redirect_uri', getCurrentLocation());
            const options = {
                method: "POST",
                headers: myHeaders,
                body: formData
            }
            fetch(`${apiUrlPrefix}/auth-svc/oauth/token`, options).then((next) => {
                next.json().then(resp => {
                    document.getElementById('token').innerText = JSON.stringify(resp, undefined, 4);
                    window.history.pushState({}, document.title, window.location.pathname);
                })
            })
        }
        function getPasswordToken(projectId, clientId) {
            const myHeaders = new Headers();
            myHeaders.append("Authorization", 'Basic ' + btoa(clientId + ':' + commonSecret));
            const formData = new FormData();
            formData.append('grant_type', 'password');
            formData.append('username', document.getElementById('username').value);
            formData.append('password', document.getElementById('password').value);
            if (mfaRequired) {
                formData.append('mfa_code', document.getElementById('mfa_code').value);
                formData.append('mfa_id', document.getElementById('mfa_id').value);
            }
            formData.append('scope', projectId);
            const options = {
                method: "POST",
                headers: myHeaders,
                body: formData
            }
            fetch(`${apiUrlPrefix}/auth-svc/oauth/token`, options).then((next) => {
                next.json().then(resp => {
                    if (resp.mfaId) {
                        mfaRequired = true;
                        document.getElementById('mfa_id').value = resp.mfaId;
                        document.getElementById('token').innerText = 'Enter MFA 654321 and try again';
                    } else {
                        document.getElementById('token').innerText = JSON.stringify(resp, undefined, 4);
                    }
                })
            })
        }
    </script>
</head>

<body>
    <div>
        <h1 style="padding-left: 24px;">使用场景</h1>
        <div style="padding: 24px; padding-top: 0px;">
            <div>
                <h2>1. 获取客户端权限 OAuth2模式: Client Credential</h2>
                <button onclick="clientCredentialLogin(clientCreClientId)">获取Token</button>
            </div>
        </div>
        <div style="border-top: 2px solid black; padding: 24px; margin-top: 24px;">
            <div>
                <h2>2. 用户SSO(单点登录)获取演示项目权限 OAuth2模式:Authorization Code </h2>
                <button onclick="authorizationLogin(projectId,authorizeClientId)">登录</button>
            </div>
        </div>
        <div style="border-top: 2px solid black; padding: 24px; margin-top: 24px;">
            <div>
                <h2>3. 用户输入账号密码登录获取演示项目权限 OAuth2模式:Password</h2>
                <div>
                    <label>Username</label>
                    <input name="username" id="username" />
                </div>
                <div>
                    <label>Password</label>
                    <input name="password" type="password" id="password" />
                </div>
                <div>
                    <label>MFA Token(选填)</label>
                    <input name="mfa" id="mfa_code" />
                    <input name="mfa" id="mfa_id" hidden />
                </div>
                <div>
                    <button onclick="getPasswordToken(projectId,passwordClientId)">登录</button>
                </div>
            </div>
        </div>
        <div style="border-top: 2px solid black; padding: 24px; margin-top: 24px;">
            <h2>Token 值</h2>
            <div id="token"></div>
        </div>
    </div>
    <div>
        <h1 style="padding-left: 24px;">演示API调用</h1>
        <div style="padding: 24px; padding-top: 0px;">
            <div>
                <h2>1. 调用公共API</h2>
                <button onclick="callPublicApi()">调用</button>
            </div>
        </div>
        <div style="border-top: 2px solid black; padding: 24px; margin-top: 24px;">
            <h2>返回值</h2>
            <div id="output"></div>
        </div>
    </div>
    <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>